<template>
  <div class="nav-header">
    <div class="nav-left">
      <div class="menu-trigger">
        <i class="icon-menu">≡</i>
      </div>
      <div class="app-brand">
        <div class="app-icon">X</div>
        <span class="app-name">项目协作 Projex</span>
      </div>
    </div>
    <div class="nav-center">
      <div class="search-box">
        <i class="icon-search">⌕</i>
        <input type="text" placeholder="在项目协作中搜索">
        <span class="shortcut">Ctrl K</span>
      </div>
    </div>
    <div class="nav-right">
      <span class="nav-item">美国</span>
      <div class="notice-item">
        <i class="icon-notice">⚠</i>
        <span class="notice-text">云效计费账号公告</span>
      </div>
      <span class="nav-item">登录</span>
      <span class="nav-item">
        <i class="icon-bell">♪</i>
        <span class="notification-badge">1</span>
      </span>
      <span class="nav-item">
        <i class="icon-help">?</i>
      </span>
      <span class="nav-item avatar">⚉</span>
    </div>
  </div>

  <div class="page-container">
    <div class="left-sidebar">
      <div class="sidebar-item active">
        <i class="icon-task">◷</i>
        <span>工作项</span>
      </div>
      <div class="sidebar-item">
        <i class="icon-project">◰</i>
        <span>项目</span>
      </div>
      <div class="sidebar-item pro">
        <i class="icon-portfolio">◳</i>
        <span>项目集</span>
        <span class="pro-tag">PRO</span>
      </div>
      <div class="sidebar-item">
        <i class="icon-view">◱</i>
        <span>项目视图</span>
      </div>
      <div class="project-groups">
        <div class="group-item">
          <i class="icon-folder">◿</i>
          <span>全部项目</span>
          <span class="count">11</span>
        </div>
        <div class="group-item">
          <i class="icon-manage">◹</i>
          <span>我管理的</span>
          <span class="count">6</span>
        </div>
        <div class="group-item">
          <span>我参与的</span>
          <span class="count">10</span>
        </div>
        <div class="group-item">
          <span>我收藏的</span>
          <span class="count">4</span>
        </div>
        <div class="group-item">
          <span>已归档</span>
          <span class="count">0</span>
        </div>
      </div>
      <div class="sidebar-bottom">
        <div class="sidebar-item">
          <i class="icon-quick">↗</i>
          <span>快速入口</span>
        </div>
        <div class="sidebar-item">
          <i class="icon-settings">⚙</i>
          <span>全局设置</span>
        </div>
      </div>
    </div>

    <div class="main-content">
      <div class="content-header">
        <div class="header-left">
          <h2>项目</h2>
        </div>
        <div class="header-right">
          <div class="search-filter">
            <i class="icon-search">⌕</i>
            <input type="text" placeholder="搜索">
          </div>
          <div class="view-options">
            <button class="view-btn active">
              <i class="icon-grid">▦</i>
              <span>卡片</span>
            </button>
            <button class="view-btn">
              <i class="icon-list">☰</i>
              <span>列表</span>
            </button>
          </div>
          <button class="create-btn">
            <i class="icon-plus">+</i>
            <span>新建项目</span>
          </button>
        </div>
      </div>

      <div class="project-grid">
        <div v-for="project in projects" :key="project.id" class="project-card">
          <div class="card-bg" :style="{ background: project.gradient }">
            <div class="card-content">
              <i :class="['project-icon', `icon-${project.icon}`]"></i>
              <span class="project-name">{{ project.name }}</span>
              <div class="card-actions">
                <i v-if="project.locked" class="icon-lock">⚿</i>
                <i class="icon-star">★</i>
              </div>
            </div>
          </div>
        </div>
        <div class="create-card">
          <i class="icon-plus">+</i>
          <span>创建新项目</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.nav-header {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  background: white;
  border-bottom: 1px solid #eee;
}

.page-container {
  display: flex;
  height: calc(100vh - 56px);
}

.left-sidebar {
  width: 200px;
  background: #f7f9fc;
  border-right: 1px solid #eee;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
}

.sidebar-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  color: #666;
}

.sidebar-item.active {
  background: #e6f7ff;
  color: #1890ff;
}

.project-groups {
  margin-top: 24px;
  border-top: 1px solid #eee;
  padding-top: 16px;
}

.group-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  cursor: pointer;
}

.count {
  color: #999;
  font-size: 12px;
}

.main-content {
  flex: 1;
  padding: 24px;
  background: white;
}

.project-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
}

.project-card {
  width: calc(25% - 18px);
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.card-bg {
  height: 100%;
  width: 100%;
}

.card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.4));
  color: white;
}

.create-card {
  width: calc(25% - 18px);
  height: 140px;
  border: 2px dashed #ddd;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
}

/* 基础图标样式 */
[class^="icon-"] {
  font-style: normal;
  line-height: 1;
}

/* 其他样式保持不变，只需添加图标相关的样式 */
.project-icon {
  font-size: 20px;
  color: white;
}

.card-actions {
  display: flex;
  gap: 8px;
  color: white;
}

.icon-lock,
.icon-star {
  font-size: 16px;
  opacity: 0.8;
}

/* 其他样式... */
</style>

<script setup>
import { ref } from 'vue'

const projects = ref([
  { 
    id: 1, 
    name: '知识库小程序',
    icon: 'mobile',
    gradient: 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)'
  },
  { 
    id: 2, 
    name: '经销商平台',
    icon: 'shop',
    gradient: 'linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%)'
  },
  { 
    id: 3, 
    name: '供应链小程序',
    icon: 'link',
    gradient: 'linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%)'
  },
  { 
    id: 4, 
    name: '运营决胜小程序',
    icon: 'global',
    gradient: 'linear-gradient(120deg, #f6d365 0%, #fda085 100%)',
    locked: true
  },
  { 
    id: 5, 
    name: '成本计算',
    icon: 'calculator',
    gradient: 'linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)'
  }
])
</script> 